<style>
    #wechatEditor .wangEditor-container * {
        line-height: normal !important;
    }
</style>

<template>

    <someline-form-panel
            @form-submit="onFormSubmit"
            v-loading.body="isLoading"
    >

        <template slot="PanelHeading">
            图文编辑
        </template>


        <someline-form-group-input
                placeholder="标题"
                :rounded="true"
                v-model="form_data.title"
                :required="true"
        >

             <template slot="Label">标题</template>
        </someline-form-group-input>

        <someline-form-group-line/>

        <div id="wechatEditor">
            <someline-form-group-editor
                    height="600px"
                    :required="true"
                    :wang-image-upload="true"
                    v-model="form_data.content"
            >
                <template slot="Label">内容</template>
            </someline-form-group-editor>
            <someline-form-group-line/>
        </div>

        <someline-form-group>
            <template slot="ControlArea">
                <button type="submit" class="btn btn-primary">保存</button>
                <!--<a :href="form_data.url" target="_blank" class="btn btn-default">预览</a>-->
            </template>
            <!--<pre class="m-t-sm m-b-none">{{ form_data }}</pre>-->
        </someline-form-group>

    </someline-form-panel>

</template>

<script>
    export default {
        props: {
            itemId: {
                type: String,
                required: false
            }
        },

        data() {
            return {

                isLoading: false,

                single_checkbox_items: [
                    {
                        text: '置顶',
                        value: 'yes',
                    }
                ],



                editor: null,

                form_data: {
                    title: null,
                    content: null,
                },

                data: null,

            }
        },
        computed: {
            inEditMode() {
                return !!this.itemId;
            }
        },
        components: {},
        mounted() {
            if (this.inEditMode) {
                this.fetchData();
            }
            console.log('Component Ready.');
        },
        watch: {},
        events: {},
        methods: {
            fetchData() {
                this.isLoading = true;
                this.$api
                    .get(`wechat/material/${this.itemId}`, {
                        params: {
//                            include: ''
                        }
                    })
                    .then(this.updateDataFromResponse, this.handleFormResponseError)
                    .catch(this.handleFormResponseError)
                    .finally(this.handleFormResponseComplete);
            },
            updateDataFromResponse(response) {
                let data = response.data.data;

                let newsItem = data.news_item[0];
                this.form_data = Object.assign({}, this.form_data, newsItem);

                setTimeout(function () {
                    $("[data-src]").each(function () {
                        if (!$(this).attr('src')) {
                            $(this).attr('src', $(this).attr('data-src'));
                        }
                    })
                }, 500)
            },
            arrayColumn(array = [], column) {
                let result = [];
                array.forEach(function (item) {
                    result.push(item[column]);
                });
                return result;
            },
            onFormSubmit() {
                console.log('onFormSubmit');

                this.isLoading = true;

                if (this.inEditMode) {
                    this.$api.put(`wechat/material/article/${this.itemId}`, this.form_data)
                        .then(this.handleUpdatedResponseSuccess)
                        .catch(this.handleFormResponseError)
                        .finally(this.handleFormResponseComplete);
                } else {
                    this.$api.post('wechat/material', this.form_data)
                        .then(this.handleCreatedResponseSuccess)
                        .catch(this.handleFormResponseError)
                        .finally(this.handleFormResponseComplete);
                }

            },
            handleCreatedResponseSuccess(response) {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
//                this.redirectToUrl(`/console/notices/${response.data.data.someline_notice_id}`);
            },
            handleUpdatedResponseSuccess(response) {
                this.$message({
                    message: '更新成功',
                    type: 'success'
                });
//                this.redirectToUrl(`/console/notices/${this.itemId}`);
            },
            handleFormResponseError(error) {

                var error_message = '请求失败';
                try {
                    var response_error_message = error.response.data.message;
                    if (response_error_message) {
                        console.error(response_error_message);
                        error_message = this.$options.filters.truncate(response_error_message, 80);
                    }
                } catch (e) {
                    console.error(e.stack);
                }

                this.$message({
                    message: error_message,
                    type: 'error'
                });

            },
            handleFormResponseComplete() {

                this.isLoading = false;

            },
            onEditorConfig(editor) {
                console.log('onEditorConfig');

                // set editor
                this.editor = editor;

            },
            onEditorReady(editor) {
                console.log('onEditorReady');

                this.handleEditorText(editor);
            },
            onEditorChange(editor) {
                console.log('onEditorChange');

                this.handleEditorText(editor);
            },
            handleEditorText(editor) {

                var text = editor.$txt.text();
                console.log('text: ', text);

                var formatText = editor.$txt.formatText();
                console.log('format text: ', formatText);
                this.form_data.body_text = formatText;

            }
        },
    }
</script>